import React from 'react';
import ReactDOM from 'react-dom';
import '../../static/tero/common.less';
import '../../static/tero/circle.less'
import Navv from './nav.jsx';
import u from '../../common.js'

import $ from 'jquery'

class Circle extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            names: ['朋友圈一', '朋友圈二', '朋友圈三', '朋友圈四', '朋友圈五', '朋友圈六', '朋友圈七', '朋友圈八', '朋友圈九', '朋友圈十'],
            flag: true,
            index: 0,
            search: [{ src: "../../static/image/tou_fifty.png", title: '宋中继' }, { src: "../../static/image/tou_fifty.png", title: '王小筱' }, { src: "../../static/image/tou_fifty.png", title: '鲁达' }, { src: "../../static/image/tou_fifty.png", title: '宋中继' }, { src: "../../static/image/tou_fifty.png", title: '钱度' }, { src: "../../static/image/tou_fifty.png", title: '李四' },],
            base: [],
            block: 0,
            flagx: true,
            top: '-23px',
            filter: ['朋友圈一', '朋友圈二', '朋友圈三', '朋友圈四', '朋友圈五', '朋友圈六', '朋友圈七', '朋友圈八', '朋友圈九', '朋友圈十'],
            userList: [],
            source: '',
            isCollect: ''
        }
    }
    componentWillMount() {
        this.getContent()
    }
    getContent() { //查看所有的个人朋友圈账号列表
        u.allCollection(data => {
            let arr = []
            if (data.userList.length == 0) {
                return
            }
            data.userList.forEach((item, index) => {
                arr.push(item.userName)
            })
            this.setState((prevState, props) => ({
                names: arr,
                filter: arr,
                userList: data.userList
            }), () => {
                this.getIdContent(this.state.userList[0].wxId, 0)
            })
        })

    }
    getIdContent(wxId, index) {  //根据微信号查看个人朋友圈列表
        u.wxCollection({ wxId: wxId }, data => {
            this.setState((prevState, props) => ({
                base: data.roundContentList,
            }))
            u.allCollection((data) => {
                this.setState((prevState, props) => ({
                    isCollect: data.userList[index].isCollect,
                    source: data.userList[index].id
                }))
            })
        })
    }
    goRouter(d) {
        this.props.history.push(d)
    }
    setfollow(bool) { //设置关注

        u.friendCollection({ isCollect: bool, id: this.state.source }, data => {

        })
    }
    blockContent(index, val) {
        if (val || val == '') {
            this.setState((prevState, props) => ({
                filter: this.state.names.filter((item) => {
                    return item.includes(val)
                })
            }))
        } else {
            this.setState((prevState, props) => ({
                block: index,
            }), () => {
                this.getIdContent(this.state.userList[index].wxId, index)
            })
        }


    }
    render() {
        return (
            <div className='tero_father'>
                <Navv names={this.state.names} blockContent={this.blockContent.bind(this)} top={this.state.top} filter={this.state.filter} />
                <div className='nav_bb'>
                    <div className='nav_b_left'>
                        <div className='nav_b_left_son_periphery'>
                            <div className='span' onClick={() => {
                                this.setfollow(this.state.isCollect ? 0 : 1)
                                this.setState((prevState, props) => ({
                                    isCollect: this.state.isCollect ? 0 : 1
                                }))
                            }} style={{ backgroundColor: this.state.isCollect ? '#5286ff' : '#fff', color: this.state.isCollect ? '#fff' : '#5286ff' }}>{this.state.isCollect ? '已关注' : '重点关注'}</div>
                        </div>
                        <div className='nav_b_left_content nav_b_left_content_active'>
                            {
                                this.state.base && this.state.base.map((item, index) => {
                                    return (
                                        <div className='nav_b_left_son' key={index}>
                                            <div className='nav_b_left_t'><img src={require('../../static/image/tou_one.png')} alt="" /></div>
                                            <p><span>{item.authorName}</span><br />{item.media_content}<br /><span>{u.unixTime(item.addTime)}</span></p>
                                        </div>
                                    )
                                })

                            }
                        </div>

                    </div>
                </div>
            </div>
        )
    }
}




export default Circle